<template>
  <div>
    <Drawer ref="DrawerRef" title="设置商品详情" @submit="submit" size="60%">
      <el-form :model="form">
        <el-form-item label="规格类型">
          <el-radio-group v-model="form.sku_type">
            <el-radio :label="0">单规格</el-radio>
            <el-radio :label="1">多规格</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.sku_type === 0">
          <el-form-item label="市场价格">
            <el-input v-model="form.sku_value.oprice" style="width: 35%">
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销售价格">
            <el-input v-model="form.sku_value.pprice" style="width: 35%">
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="成本价格">
            <el-input v-model="form.sku_value.cprice" style="width: 35%">
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.sku_value.weight" style="width: 35%">
              <template #append>公斤</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品体积">
            <el-input v-model="form.sku_value.volume" style="width: 35%">
              <template #append>立方米</template>
            </el-input>
          </el-form-item>
        </template>
        <template v-else>
          <SkuCard />
          <!-- <SkuTable /> -->
        </template>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Drawer from "@/components/Drawer/index.vue";
import { readGoods, updateskusGoods } from "@/api/goods";
import { Toast } from "@/utils/utils.js";
import SkuCard from "./components/SkuCard.vue";

import {
  initSkuCardList,
  goodsId,
  sku_list,
  sku_card_list,
} from "@/composables/useSkus.js";

let DrawerRef = ref(null);
let form = reactive({
  sku_type: 0, //规格类型：0单规格1多规格
  sku_value: {
    oprice: 0,
    pprice: 0,
    cprice: 0,
    weight: 0,
    volume: 0,
  },
});
// 打开
const open = (row) => {
  goodsId.value = row.id;
  readGoods(row.id)
    .then((res) => {
      form.sku_type = res.data.sku_type;
      form.sku_value = res.data.sku_value || {
        oprice: 0,
        pprice: 0,
        cprice: 0,
        weight: 0,
        volume: 0,
      };
      //   把多规格的值传到自定义的hooks中
      initSkuCardList(res.data);
      DrawerRef.value.openDrawer();
    })
    .catch((err) => {
      console.log(err);
    });
};
const submit = () => {
  let data = {
    sku_type: form.sku_type,
    sku_value: form.sku_value,
  };
  if (form.sku_type == 1) {
    data.goodsSkus = sku_card_list.value;
  }
  updateskusGoods(goodsId.value, data).then((res) => {
    if (res.status === 200) {
      Toast("设置成功");
      DrawerRef.value.closeDrawer();
      emit("submit");
    }
  });
};
defineExpose({
  open,
});
</script>
